<template>
  <div class="h-full w-full p-4 text-white dark:text-sky-300">
    <div class="flex items-center justify-between">
      <div class="">
        <h1 class="text-2xl font-black">CDTCC / 3Hole</h1>
        <p class="text-xs font-thin">终端管制室树洞小程序</p>
      </div>
      <el-popover placement="bottom-end" :visible="menuVisible">
        <template #reference>
          <div v-if="menuEnabled">
            <!-- <button
              class="animate-ping absolute text-2xl border-2 border-white dark:border-sky-300 rounded-full p-2 opacity-50"
            >
              <i-ep-menu />
            </button> -->
            <button
              class="relative text-2xl border-2 border-white dark:border-sky-300 rounded-full p-2"
              @click="menuVisible = !menuVisible"
            >
              <i-ep-menu />
            </button>
          </div>
          <div v-else></div>
        </template>
        <NavMenu @close="menuVisible = false" />
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import NavMenu from './NavMenu.vue'
import useViewStore from '@/stores/view.js'
const viewStore = useViewStore()
const menuVisible = ref(false)
const menuEnabled = computed(() => viewStore.office != 0)
</script>
